<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>{$system_name}</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileColor" content="#0e90d2">
    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
  <link rel="canonical" href="http://www.example.com/">
  -->
    <link rel="stylesheet" href="__PUBLIC__/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/app.css">
    <!--<link rel="stylesheet" href="__PUBLIC__/assets/css/index.css">-->
    <!--必要样式-->
    <style>
        .award {
            width: 100%;
            height: auto;
            max-width: 640px;
        }

        .award-item {
            padding: 15px 10px;
            border-bottom: 1px solid #E6E6E6;
            height: auto;
        }

        .award-item-left {
            float: left;
            width: 60px;
            height: 57px;
        }

        .award-item-right {

            float: left;
            height: auto;
            padding: 0 10px;

        }

        .item-num {
            display: block;
            width: 60px;
            background: #FEBF00;
            text-align: center;
            color: #FFF;
            font: bold 18px SimSun;
            line-height: 32px;
            border-bottom: 1px solid #FFF;
        }

        .item-type {
            display: block;
            width: 60px;
            background: #FEBF00;
            text-align: center;
            color: #FFF;
            font: 10px SimSun;
            line-height: 24px;
        }

        .item-right-top .type {
            font-size: 14px;
            color: #251D02;
        }

        .item-right-top .num {
            font-size: 14px;
            color: #251D02;
            color: #F00;
            width: 70px;
            display: inline-block;
            float: right;
            border: 1px solid #FF0000;
            border-radius: 5px;
            text-align: center;
            line-height: 18px;
        }

        .item-right-bottom span {
            font-size: 12px;
            color: #251D02;
            margin: 5px 5px 5px 0;
            font-size: 12px;
            line-height: 20px;


        }
    </style>
</head>

<body>
<header data-am-widget="header" class="am-header am-header-default">
    <h1 class="am-header-title">
        <a href="#title-link" class="">
            领奖台
        </a>
    </h1>
</header>

<input type="hidden" id="goods_pagenum_hidden" value="1">
<div class="award" id="goods_list">

</div>

<a href="__APP__/Home/Lottery"><img src="__PUBLIC__/assets/i/Lucky_draw.png" width="100" alt="" style="position: fixed;right: 10px;bottom: 100px;"></a>
<include file="Public:nav_bottom" />
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-bd">

        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" style="color: #0096FF;" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>

<div class="am-modal am-modal-confirm" tabindex="-1" id="money_confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-bd" style="color: #251D02;" id="money_content">
            对不起，您的钻石不足！
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" style="color: #333" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>充值</span>
        </div>
    </div>
</div>

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="__PUBLIC__/assets/js/jquery.min.js"></script>
<script src="__PUBLIC__/assets/js/angular.min.js"></script>
<script src="__PUBLIC__/assets/js/amazeui.min.js"></script>
<script src="__PUBLIC__/layer/layer.js"></script>
<script type="text/javascript">
    $(function () {
        var windowWidth = $(window).width();
        $('.award-item-right').width(windowWidth - 100);
    });

    function award(obj){
        var id = $(obj).data('id');
        var title = $(obj).data('title');
        var poundage = $(obj).data('poundage');
        var money = $(obj).data('money') * 10;
        var hint = '';
        if(poundage > 0){
            hint = "该充值卡需要"+money+"钻石(额外手续费"+poundage+"钻石)，您要确定兑换吗?";
        }else{
            hint = "该充值卡需要"+money+"钻石，您要确定兑换吗?";
        }
        layer.confirm(hint, {
            btn: ['确定','取消'] //按钮
        }, function(){
            $.ajax({
                type: "POST",
                url: "__URL__/award",
                data: {
                    id: id
                },
            dataType: "json",
                success: function (data) {
                    if(data.code != 1)
                        layer.msg(data.message);
                    if(data.success){
                        showInfo(data.data);
//                    change();
                        timer(intDiff);
                    }else{
                        if(data.code == 1){
                            //钻石不足
                            layer.confirm("对不起，您的钻石数目不足！", {
                                btn: ['充值','取消'] //按钮
                            }, function(){
                                window.location.href='__APP__/Home/Recharge/';
                            },function(){

                            });
                        }
                    }
                },
                error: function (data) {
                    console.info(data);
                }
            });
        }, function(){
        });
    }

    var page=1; //当前页的页码
    var allpage =1; //总页码，会从后台获取
    $(function () {
        getGoodsListByPage(1);
    });

    function scrollFn(){
        allpage = $('#totalpage').val();
        //真实内容的高度
        var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
        //视窗的高度
        var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
        //隐藏的高度
        var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        if(pageHeight - viewportHeight - scrollHeight < 20){  //如果满足触发条件，执行
            if(page <= allpage) {
                getGoodsList();
            }
        }
    }
    $(window).bind("scroll",scrollFn);  //绑定滚动事件
    function getGoodsListByPage(pagenum) {
        //提交form
        $('#goods_pagenum_hidden').val(pagenum);
        getGoodsList();
    }
    function getGoodsList() {
        $.ajax({
            type: "POST",
            url: "__URL__/ajaxGoodsList",
            async: false,
            data: {
                pagenum: page
            },
//            dataType: "json",
            success: function (data) {
//                console.info(data);
                page++;  //页数加1
                console.info('nextPage:' + page);
                $('#goods_pagenum_hidden').val(page);
                $('#goods_list').append(data);
                AMUI.gallery.init();
//                $("img .lazy").lazyload();
            },
            error: function (data) {
                console.info(data);
            }
        });
    }
</script>
</body>
</html>

